import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import {useDebounce} from 'use-debounce'
import { useEffect } from 'react'
import axios from 'axios'
// import 'antd/dist/antd.css'
// import Cart from './components/cart'
import { doSearch } from './api/request'
function App() {
  const [filter,setFilter]=useState('')
  const [debouinceFilter]=useDebounce(filter,500)
  const [userCollection,setUserCollection]=useState([])
  // console.log(debouinceFilter)
  useEffect(()=>{
    if(!filter){
      return 
    }
    // const doSearch=async()=>{
    //   // fetch(`https://swapi.dev/api/people/?search=${filter}`)
    //   //   .then(response=>response.json)
    //   //   .then((json)=>setUserCollection(json.results))
    //   const {data:{results}}=await axios.get(`https://swapi.dev/api/people/?search=${filter}`)
    //   // console.log(results);
    //   setUserCollection(results)
    // }
    // doSearch()
    (async ()=>{
      const {data:{results}}=await doSearch(filter)
      // console.log(result)
      setUserCollection(results)
    })()
    // const result=doSearch(filter)
    // console.log(result);
  },[debouinceFilter])
  return (
    <div className="App">
      {/* <Cart /> */}
      <input value={filter} onChange={(e)=>setFilter(e.target.value)}/>
      <ul>
        {
          userCollection.map(({name},index)=>(
            <li key={index}>{name}</li>
          ))
        }
      </ul>
      {
        userCollection.length==0 && <div>没有记录</div>
      }
    </div>
  )
}

export default App
